<template>    
    <div>
        <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="deptName"
            @focus='deptChooseHandle'
            class="deptDemo">
        </el-input>
        <el-dialog
            title="提示"
            align='left'
            :visible.sync="dialogVisible"
            width="80%"
            height='400px'
            :before-close="handleClose">
            <span>
                <div style="">
                    <tree-table :tableData='tableData' :queryParams='queryParams' :multiple='multiple' :apiName='apiName' ref='treetable'></tree-table>
                </div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ensureHandle">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import TreeTable from '@/components/treeTableTemplate'
import {queryApi} from '@/api/api.js'
export default {
    data() {
        return {
            dialogVisible: false,
            deptName:'',
            tableData: [
                {
                    id: 3,
                    name: '红双喜电器001',
                    atr: '固定值（元/月）',
                    price: '100',
                    // checked: false,
                    children: [{
                        id: 31,
                        parentId:3,
                        name: '红双喜电器子001001',
                        atr: '固定值（元/月）',
                        price: '99',
                        // checked: false
                    }, {
                        id: 32,
                        parentId:3,
                        name: '红双喜电器子001002',
                        atr: '固定值（元/月）',
                        price: '99',
                        // checked: false
                    }]
                },
                {
                    id: 4,
                    name: '红双喜电器002',
                    atr: '固定值（元/月）',
                    price: '100',
                    // checked: false,
                    children: [
                    {
                        id: 33,
                        parentId:4,
                        name: '红双喜电器子002001',
                        atr: '固定值（元/月）',
                        price: '99',
                        // checked: false,
                        children: [
                            {
                                id: 35,
                                parentId:33,
                                name: '红双喜电器子002001001',
                                atr: '固定值（元/月）',
                                price: '99',
                                // checked: false
                            },
                            {
                                id: 36,
                                parentId:33,
                                name: '红双喜电器子-孙儿002001002',
                                atr: '固定值（元/月）',
                                price: '99',
                                // checked: false
                            }
                        ]
                    }, {
                        id: 34,
                        parentId:4,
                        name: '红双喜电器子002002',
                        atr: '固定值（元/月）',
                        price: '99',
                        // checked: false
                    }]
                }
            ],
            queryParams: {
                name: '红双喜电器子001002'
            },
            apiName:"",//"queryApi"
            multiple: true
        }
    },
    methods: {
        handleClose(done) {
            // this.$confirm('确认关闭？')
            // .then(_ => {
                done();
            // })
            // .catch(_ => {});
        },
        deptChooseHandle() {
            this.dialogVisible = true;
        },
        ensureHandle() {
            let ids=[];
            let depts= []
            let data = this.$refs.treetable.initTableData
            let res = this.findLeafNode(data, ids, depts)
            this.deptName = res.depts.join(',')
            this.dialogVisible = false;
        },
        findLeafNode(data, ids, depts) {
            //叶子节点
            for(let i=0; i<data.length; i++) {
                if(data[i].children) {
                    this.findLeafNode(data[i].children, ids, depts)
                }else{
                    //id name 若最终定义的数据格式与之不一致，可相应修改
                    if(data[i].checked) {
                        ids.push(data[i].id)
                        depts.push(data[i].name)
                    }
                }
            }
            return {
                ids: ids,
                depts: depts
            }
        }
    },
    components: { 
        TreeTable
    }
}
</script>
<style>
    .deptDemo {
        width:220px;
        float:left;
    }

</style>


